<template>
    <el-container style="width:1100px">
        <el-header>
            <el-card shadow="always">
                <div style="font-size:16px">我的保证金</div>
            </el-card>
        </el-header>
        <el-main>
            <el-card shadow="always" style="height:530px">
                <div style="margin-left:45%;margin-top:40px;color:#111111">保证金余额</div>

                <div style="margin-left:45%;margin-top:40px;font-size:25px;font-weight:bold;">¥0.00</div>
                <div class="container-line">待补缴金额:
                    <a href="">¥0.00</a>
                    <strong>></strong>
                </div>
                <div class="amount">
                    <p style="color: #7d8090">可提现余额</p>
                    <p style="font-size:15px;display:inline-block;margin-left: 20px;margin-top: 13px">0.00</p>
                </div>
                <div class="amount2">
                    <p style="color: #7d8090">不可提现余额</p>
                    <p style="font-size:15px;display:inline-block;margin-left: 20px;margin-top: 13px">0.00</p>
                </div>
                <div style=" position: relative;">
                    <div class="btns">提现</div>
                    <div class="btn1">充值</div>
                    <el-icon style=" position: absolute;bottom:-197px;left:460px; ">
                        <Service />
                    </el-icon>
                    <p style=" position: absolute;bottom:-200px;left:480px; cursor: pointer;">联系客服</p>
                </div>
            </el-card>
            <el-card>
                <div style="margin-bottom:20px">
                    <p class="title">保证金明细</p>
                    <p style="margin-left:476px;margin-top:60px;font-size:14px;color:#7d8090">暂无数据</p>
                </div>
            </el-card>
        </el-main>

    </el-container>
</template>

<script setup lang="ts">
import { Service } from "@element-plus/icons-vue"
</script>

<style scoped>
.container-line {
    display: flex;
    margin: 20px 405px;
    width: 170px;
    height: 30px;
    cursor: pointer;
    display: inline-block;
    color: #121212;

    text-align: center;
    font-size: 14px;
    background: #f5f7f9;

    border-radius: 16px;
    text-align: center;
    line-height: 30px;
}

.container-line a {
    color: #f93684
}

.container-line strong {
    color: #ccc;

    margin: 9px;
}

.amount {
    margin-left: 400px;
    float: left;
    width: 100px;
    height: 59px;
    display: inline-block;
    font-size: 13px;
    color: #cccccc
}

.amount2 {
    font-size: 13px;

}

.amount p {

    color: #121212;


}

.btn1 {
    position: absolute;
    top: 30px;
    left: 530px;
    display: inline-block;
    width: 170px;
    height: 50px;
    cursor: pointer;
    width: 170px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 8px;
    background: #f93584;

    color: white;
}

.btns {
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 280px;
    width: 170px;
    height: 50px;
    cursor: pointer;
    width: 170px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 8px;
    border: 1px solid #f93584;

    color: #f93684;

}

.title {
    height: 40px;
    font-size: 15px;
    border-bottom: 1px solid #ccc;

}
</style>